<template>
  <div class="account-settings">
    <h2 class="section-title">账户设置</h2>
    <p class="section-description">管理您的账户偏好和安全设置</p>
    
    <div class="settings-tabs">
      <button 
        v-for="tab in tabs" 
        :key="tab.id"
        class="tab-btn"
        :class="{ 'active': activeTab === tab.id }"
        @click="activeTab = tab.id"
      >
        {{ tab.name }}
      </button>
    </div>
    
    <!-- 个人资料设置 -->
    <div class="settings-panel" v-if="activeTab === 'profile'">
      <h3 class="panel-title">个人资料</h3>
      
      <div class="profile-settings">
        <div class="avatar-section">
          <div class="avatar-preview">
            <img src="@/assets/User.jpg" alt="用户头像" onerror="this.src='https://via.placeholder.com/150'">
          </div>
          <button class="btn-outline">更换头像</button>
        </div>
        
        <div class="profile-form">
          <div class="form-group">
            <label>用户名</label>
            <input type="text" v-model="profile.username" class="form-input">
          </div>
          
          <div class="form-group">
            <label>昵称</label>
            <input type="text" v-model="profile.nickname" class="form-input">
          </div>

          <div class="form-group">
            <label>手机号码</label>
            <input type="tel" v-model="profile.phone" class="form-input">
          </div>
          
          <button class="btn-primary">保存更改</button>
        </div>
      </div>
    </div>
    
    <!-- 密码修改 -->
    <div class="settings-panel" v-if="activeTab === 'password'">
      <h3 class="panel-title">修改密码</h3>
      
      <div class="password-form">
        <div class="form-group">
          <label>当前密码</label>
          <input type="password" v-model="passwordForm.current" class="form-input">
        </div>
        
        <div class="form-group">
          <label>新密码</label>
          <input type="password" v-model="passwordForm.new" class="form-input">
          <div class="password-strength" :class="passwordStrength">
            <div class="strength-bar"></div>
          </div>
          <p class="password-hint">密码应包含至少8个字符，包括大小写字母、数字和特殊符号</p>
        </div>
        
        <div class="form-group">
          <label>确认新密码</label>
          <input type="password" v-model="passwordForm.confirm" class="form-input">
          <p class="password-match" v-if="passwordForm.new && passwordForm.confirm && passwordForm.new !== passwordForm.confirm">
            两次输入的密码不匹配
          </p>
        </div>
        
        <button class="btn-primary" :disabled="!canChangePassword">更新密码</button>
      </div>
    </div>
    
    <!-- 主题设置 -->
    <div class="settings-panel" v-if="activeTab === 'theme'">
      <h3 class="panel-title">主题设置</h3>
      <p class="panel-description">选择您喜欢的网站主题颜色</p>
      
      <div class="theme-options">
        <div 
          v-for="theme in themes" 
          :key="theme.id"
          class="theme-card"
          :class="{ 'active': currentTheme === theme.id }"
          @click="selectTheme(theme.id)"
        >
          <div class="theme-preview" :style="{ background: theme.gradient }"></div>
          <div class="theme-info">
            <h4 class="theme-name">{{ theme.name }}</h4>
            <p class="theme-description">{{ theme.description }}</p>
          </div>
          <div class="theme-check" v-if="currentTheme === theme.id">✓</div>
        </div>
      </div>
      
      <div class="theme-apply">
        <button class="btn-primary" @click="applyTheme">应用主题</button>
        <p class="theme-note">主题将应用于整个用户中心</p>
      </div>
    </div>
    
    <!-- 反馈与建议 -->
    <div class="settings-panel" v-if="activeTab === 'feedback'">
      <h3 class="panel-title">反馈与建议</h3>
      <p class="panel-description">我们非常重视您的意见，请告诉我们您的想法</p>
      
      <div class="feedback-form">
        <div class="form-group">
          <label>反馈类型</label>
          <select v-model="feedback.type" class="form-select">
            <option value="suggestion">功能建议</option>
            <option value="bug">问题报告</option>
            <option value="experience">使用体验</option>
            <option value="other">其他</option>
          </select>
        </div>
        
        <div class="form-group">
          <label>标题</label>
          <input type="text" v-model="feedback.title" class="form-input" placeholder="简要描述您的反馈">
        </div>
        
        <div class="form-group">
          <label>详细内容</label>
          <textarea v-model="feedback.content" class="form-textarea" rows="6" placeholder="请详细描述您的反馈或建议..."></textarea>
        </div>
        
        <div class="form-group">
          <label>联系方式 (选填)</label>
          <input type="text" v-model="feedback.contact" class="form-input" placeholder="电子邮箱或手机号码">
          <p class="form-hint">如果您希望我们回复，请留下您的联系方式</p>
        </div>
        
        <div class="form-group">
          <label class="checkbox-label">
            <input type="checkbox" v-model="feedback.anonymous">
            匿名提交
          </label>
        </div>
        
        <button class="btn-primary">提交反馈</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AccountSettings',
  data() {
    return {
      activeTab: 'profile',
      tabs: [
        { id: 'profile', name: '个人资料' },
        { id: 'password', name: '修改密码' },
        { id: 'theme', name: '主题设置' },
        { id: 'feedback', name: '反馈与建议' }
      ],
      profile: {
        username: 'flower_lover',
        nickname: '花艺爱好者',
        email: 'user@example.com',
        phone: '138****1234',
        bio: '热爱花艺，喜欢DIY各种花束和花艺作品。'
      },
      passwordForm: {
        current: '',
        new: '',
        confirm: ''
      },
      currentTheme: 'pink',
      themes: [
        { 
          id: 'pink', 
          name: '粉色系（默认）', 
          gradient: 'linear-gradient(45deg, #D693A1, #E2F5FF)',
          description: '温馨浪漫的粉色调，适合花艺主题' 
        },
        { 
          id: 'purple', 
          name: '渐变紫色系', 
          gradient: 'linear-gradient(45deg, #9C27B0, #E1BEE7)',
          description: '高贵典雅的紫色调，展现神秘气质' 
        },
        { 
          id: 'blue', 
          name: '渐变蓝色系', 
          gradient: 'linear-gradient(45deg, #2196F3, #BBDEFB)',
          description: '清新淡雅的蓝色调，给人宁静感受' 
        },
        { 
          id: 'gray', 
          name: '渐变灰色系', 
          gradient: 'linear-gradient(45deg, #607D8B, #CFD8DC)',
          description: '简约现代的灰色调，突显专业感' 
        },
        { 
          id: 'green', 
          name: '渐变绿色系', 
          gradient: 'linear-gradient(45deg, #4CAF50, #C8E6C9)',
          description: '自然清新的绿色调，象征生机与活力' 
        }
      ],
      feedback: {
        type: 'suggestion',
        title: '',
        content: '',
        contact: '',
        anonymous: false
      }
    };
  },
  computed: {
    passwordStrength() {
      const password = this.passwordForm.new;
      if (!password) return '';
      
      if (password.length < 6) return 'weak';
      if (password.length < 10) return 'medium';
      return 'strong';
    },
    canChangePassword() {
      return (
        this.passwordForm.current && 
        this.passwordForm.new && 
        this.passwordForm.confirm && 
        this.passwordForm.new === this.passwordForm.confirm
      );
    }
  },
  methods: {
    selectTheme(themeId) {
      this.currentTheme = themeId;
    },
    applyTheme() {
      // 这里可以实现主题应用逻辑
      // 例如通过 localStorage 或 Vuex 存储用户主题偏好
      const selectedTheme = this.themes.find(theme => theme.id === this.currentTheme);
      
      // 示例：将主题应用到根元素
      document.documentElement.style.setProperty('--user-theme-gradient', selectedTheme.gradient);
      
      // 显示成功消息
      alert(`已成功应用${selectedTheme.name}主题`);
    }
  }
};
</script>

<style scoped>
.account-settings {
  color: #333;
}

.section-title {
  color: #e75480;
  margin-bottom: 0.5rem;
}

.section-description {
  color: #666;
  margin-bottom: 2rem;
}

.settings-tabs {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.tab-btn {
  padding: 0.8rem 1.5rem;
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  color: #666;
  transition: all 0.3s;
  white-space: nowrap;
}

.tab-btn:hover {
  background-color: #f8e1e7;
  color: #e75480;
}

.tab-btn.active {
  background-color: #e75480;
  color: white;
}

.settings-panel {
  background-color: white;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
}

.panel-title {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: #333;
}

.panel-description {
  color: #666;
  margin-bottom: 1.5rem;
}

/* 个人资料样式 */
.profile-settings {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2rem;
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.avatar-preview {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* 表单样式 */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-input, .form-textarea, .form-select {
  padding: 0.8rem 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  transition: all 0.3s;
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline: none;
  border-color: #e75480;
  box-shadow: 0 0 0 2px rgba(231, 84, 128, 0.1);
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

.form-hint {
  font-size: 0.9rem;
  color: #888;
  margin-top: 0.3rem;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

/* 密码修改样式 */
.password-form {
  max-width: 500px;
}

.password-strength {
  height: 5px;
  background-color: #eee;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 0.5rem;
}

.password-strength .strength-bar {
  height: 100%;
  width: 0;
  transition: width 0.3s;
}

.password-strength.weak .strength-bar {
  width: 30%;
  background-color: #f44336;
}

.password-strength.medium .strength-bar {
  width: 60%;
  background-color: #ff9800;
}

.password-strength.strong .strength-bar {
  width: 100%;
  background-color: #4caf50;
}

.password-hint {
  font-size: 0.9rem;
  color: #888;
  margin-top: 0.5rem;
}

.password-match {
  color: #f44336;
  font-size: 0.9rem;
}

/* 主题设置样式 */
.theme-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.theme-card {
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}

.theme-card:hover {
  transform: translateY(-5px);
}

.theme-card.active {
  border-color: #e75480;
}

.theme-preview {
  height: 120px;
}

.theme-info {
  padding: 1rem;
  background-color: white;
}

.theme-name {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.theme-description {
  font-size: 0.9rem;
  color: #666;
}

.theme-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 25px;
  height: 25px;
  background-color: #e75480;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.theme-apply {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.theme-note {
  font-size: 0.9rem;
  color: #888;
}

/* 按钮样式 */
.btn-primary {
  padding: 0.8rem 1.5rem;
  background-color: #e75480;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 1rem;
}

.btn-primary:hover {
  background-color: #d64d7b;
}

.btn-primary:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.btn-outline {
  padding: 0.8rem 1.5rem;
  background: none;
  border: 1px solid #e75480;
  color: #e75480;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 1rem;
}

.btn-outline:hover {
  background-color: #f8e1e7;
}

@media (max-width: 768px) {
  .profile-settings {
    grid-template-columns: 1fr;
  }
  
  .avatar-section {
    margin-bottom: 2rem;
  }
  
  .settings-tabs {
    flex-wrap: wrap;
  }
  
  .tab-btn {
    flex: 1 0 auto;
  }
}
</style>